<template>
<!-- 表单校验规则条件
    1、给form组件添加model属性，这个属性的值为绑定表单数据对象（也就是formData）
    2、给form组件添加rules属性，这个属性规定了表单的校验规则
    3、给form-item组件添加prop属性，这个属性的值就是要校验的表单对应的变量名
    4、给表单元素进行双向绑定
 -->
<el-form ref="form" :model="formData" :rules="rules" class="form">
    <el-form-item prop="username">
        <el-input v-model="formData.username" placeholder="用户名/手机"></el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-input v-model="formData.password" placeholder="密码" type="password"></el-input>
    </el-form-item>
    <el-form-item>
        <!-- justify="end" 表示靠右对齐 -->
        <el-row type="flex" justify="end">
            <span>忘记密码</span>
        </el-row>
        <el-button class="submit" type="primary" @click="submit">登录</el-button>
    </el-form-item>
</el-form>
</template>
<script>
export default {
    /**
     * 实现登录功能的思路：
     * 1、获取到用户输入的账号密码
     * 2、给登录按钮绑定点击事件 并 声明事件处理函数
     * 3、在事件处理函数中调用接口 并 传入 账号密码 
     *      成功
     *      失败
     * */ 
    data(){
        return {
            // 变量名可以自己取名字，
            // 但是不建议自己随便去名字，那么如何取名字呢？
            // 答：看接口文档，文档中规定用什么名字传数据给后端，那么我们就去什么名字
            formData: {
                username: "", // 手机号码
                password: ""  // 密码
            },
            rules:{ // 定义表单验证规则
                username: [
                    // required： true表示该值为必填值
                    // message: 错误提示语
                    // trigger：规定校验的时机，值为blur表示，表单失去焦点的时候进行校验
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        submit(){
            // console.log("用户输入的账号密码",this.formData);
            // 表单验证 使用el-form标签的validate方法进行校验
            // 原生js获取标签：document.querySelecter(类名)
            // vue中有专门的方法来获取标签：this.$refs.ref的值
            // 注意：这里的ref就相当于class
            this.$refs.form.validate(bool=>{
                if(bool){
                    // bool的值为true表示校验通过
                    console.log('校验通过!');
                    // 调用接口 实现登录
                    this.$axios({
                        url: '/accounts/login', // 请求的接口路径（后端提供的方法）
                        method: "post", // 请求方式（后端规定）
                        data: this.formData //  请求参数
                    }).then(res=>{
                        /**
                         * 后端会返回两个数据给我们
                         * 
                         * token：通过登录接口返回的数据，这个数据相当于我们的身份证，也就是这个token是我们在这个网站中的身份标识符，
                         * 有些操作是需要进行身份认证的，那么我们就把这个token传递给后端，后端就能够通过这个token的值来判断我们的身份。
                         * 
                         * user: 这个保存了用户的相关信息，比如头像、昵称、用户名等等
                         * 
                         * token和user在整个网站中属于全局的数据，就是在某个页面要用到的时候应该能直接获取到来使用
                         * 因此我们需要把token和user保存到一个全局的变量中。
                         * 
                         * 如何声明一个全局变量呢 ？
                         * 答：我们需要用到一个vuex的插件，这个插件就可以让我们能够声明一个全局注册，这个插件是下载nuxtjs项目的
                         * 时候自带的，所以我们这里可以直接使用。
                         *  我们必须在项目根目录下的store文件夹中来使用
                         * 
                         * 默认情况下store文件夹是一个空文件夹
                         * 因此我们要再里面声明变量的话需要新建一个js文件来实现
                         * 
                        */
                        console.log("调用接口结果：",res);
                        // 调用mutations全局函数来保存token和user
                        this.$store.commit('user/setUserInfo', res.data)

                        // 跳转到登录页面
                        this.$router.replace('/')
                    })
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
// lang=less 表示这里可以使用less语法来写样式
.form{
    padding: 25px;
}
.submit{
    width: 100%;
}
</style>